<template>
  <div>
    <van-list
      v-model="loading"
      :error.sync="error"
      error-text="请求加载失败，请点击重试"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
      />
    </van-list>
  </div>
</template>

<script>
// 引入搜索结果请求接口
import { getSearchResoults } from '@/api/search'

export default {
  name: 'SearchResoults',
  props: {
    searchText: {
      style: String,
      required: true
    }
  },
  data () {
    return {
      list: [], // 搜索结果列表
      loading: false, // 本次加载完毕
      finished: false, // 数据全部加载完毕
      page: 1, // 页码
      pre_page: 20, // 每页数据量
      error: false // 加载失败提示
    }
  },
  methods: {
    async onLoad () {
      try {
        // 1、请求搜索结果
        const { data } = await getSearchResoults({
          page: this.page,
          pre_page: this.pre_page,
          q: this.searchText
        })

        // 测试，错误提示
        if (Math.random() > 0.5) {
          // 转换JSON格式字符串，如果不是JSON格式，报错，错误捕获
          JSON.parse('fdadfafafdas')
        }

        // console.log(data);
        // 2、将请求结果放入数组列表中
        const { results } = data.data
        this.list.push(...results)
        // 3、当前页加载完成，停止加载loading,loading为true时，下滑不会加载下一页
        this.loading = false
        // 4、判断是否加载完，
        if (results.length) {
          // 如果没有加载完，更新页码
          this.page++
        } else {
          // 如果加载完，停止加载finished
          this.finished = true
        }
      } catch (error) {
        // 加载失败，显示提示信息
        this.error = true
        // 关闭loading,
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
